<template>
  <div class="home">
    <div class="home-header">
      <HomeCarousel />
    </div>
    <div class="home-main">
      <div
        ref="navRef"
        class="introduce-nav"
        :class="{ 'nav-fixed': scrollData.scrollTop >= pageTop }"
      >
        <div class="nav-show-box">
          <h3 class="nav-product-title">数据众包服务</h3>
        </div>
        <div ref="menuRef" class="nav-menu">
          <a
            v-for="(item, index) in menuList"
            :key="index"
            :class="{ current: activeIndex === index }"
            class="nav"
            @click="directoryJump(item.name)"
          >
            {{ item.title }}
          </a>
        </div>
        <span :style="lineStyle"></span>
      </div>
      <div ref="pageTarget" class="introduce-page">
        <div v-for="(item, index) in menuList" :id="item.name.replace('#', '')" :key="index">
          {{ item.title }}
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script lang="ts" setup name="">
import { useWindowSize } from "@/hooks/useWindowSize.hooks";
import { useGlobalStore } from "@/stores/global.sotre";
import { storeToRefs } from "pinia";
import { reactive, ref, watch, computed, onMounted, CSSProperties } from "vue";
import HomeCarousel from "./components/HomeCarousel.vue";

const navRef = ref<HTMLDivElement | null>(null);
const navWidth = ref(0);

const menuRef = ref<HTMLDivElement | null>(null);
const menuWidth = ref(0);

const pageTop = ref(0);
const activeIndex = ref(0);
const pageTarget = ref<HTMLDivElement | null>(null);
const globalStore = useGlobalStore();
const { scrollData } = storeToRefs(globalStore);
const menuList = reactive<
  {
    id: number;
    title: string;
    width: number;
    name: string;
    targetHeight: number;
    pageTop: number;
  }[]
>([
  { id: 1, title: "1", name: "#page-1", width: 0, targetHeight: 500, pageTop: 560 },
  { id: 2, title: "2", name: "#page-2", width: 0, targetHeight: 500, pageTop: 1360 },
  { id: 3, title: "3", name: "#page-3", width: 0, targetHeight: 500, pageTop: 2160 },
  { id: 4, title: "4", name: "#page-4", width: 0, targetHeight: 500, pageTop: 2960 },
  { id: 5, title: "5", name: "#page-5", width: 0, targetHeight: 500, pageTop: 3760 },
  { id: 6, title: "6", name: "#page-6", width: 0, targetHeight: 500, pageTop: 4460 }
]);

const lineStyle = computed<CSSProperties>(() => {
  return {
    left: `${
      (navWidth.value - menuWidth.value) / 2 +
      menuWidth.value / menuList.length / 2 +
      activeIndex.value * (menuWidth.value / menuList.length) -
      (scrollData.value.scrollTop < 560 ? 28 : 20)
    }px`
  };
});

const { width, height } = useWindowSize();

watch(
  () => width.value,
  (newValue) => {
    if (!navRef.value) return;
    if (!menuRef.value) return;
    menuWidth.value = menuRef.value.offsetWidth;
    navWidth.value = navRef.value.offsetWidth;
  }
);

// 监听滚动数据
const subscribe = globalStore.$subscribe(
  () => {
    // 查询最后的下标
    menuList.forEach((item, index) => {
      if (scrollData.value.scrollTop >= item.pageTop) {
        activeIndex.value = index;
      }
    });
  },
  { detached: false, immediate: true }
);

// 目录跳转
const directoryJump = (targetName: string) => {
  document.querySelector(targetName)?.scrollIntoView(true);
};

onMounted(() => {
  if (!pageTarget.value) return;
  if (!navRef.value) return;
  if (!menuRef.value) return;
  menuWidth.value = menuRef.value.offsetWidth;
  navWidth.value = navRef.value.offsetWidth;
  pageTop.value = pageTarget.value.offsetTop + 60;
});
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  &-header {
    width: 100vw;
    height: 500px;
  }
}

.introduce-nav {
  position: relative;
  color: #181a24;
  background-color: #fff;
  width: 100%;
  min-width: 1200px;
  border-bottom: 1px solid rgba(25, 28, 61, 0.1);
  transition: background-color 0.5s ease-out;
  span {
    position: absolute;
    width: 40px;
    display: block;
    height: 2px;
    background: #2467f2;
    bottom: 0;
    -webkit-transition: left 0.5s ease-out;
    -moz-transition: left 0.5s ease-out;
    transition: left 0.5s ease-out;
  }
  &.nav-fixed {
    position: fixed;
    top: 0px;
    background: #fff;
    bottom: initial;
    border-bottom: 1px solid #e6e6e6;
    z-index: 1;
    .nav-show-box {
      height: 50px;
      .nav-product-title {
        color: black;
        font-weight: 800;
      }
    }
  }
  .nav-show-box {
    height: 0;
    overflow: hidden;
    position: relative;
    width: 1180px;
    margin: 0 auto;
    -webkit-transition: height 0.5s ease-out;
    -moz-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
    .nav-product-title {
      margin: 7px 160px;
      font-size: 24px;
      color: #fff;
      line-height: 36px;
      text-align: center;
      font-weight: 400;
    }
  }

  .nav-menu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 1200px;
    margin: 0 auto;
    a {
      color: #2c3a46;
      text-decoration: none;
    }
    .nav {
      display: inline-block;
      text-align: center;
      line-height: 60px;
      width: 100%;
      min-width: 165px;
      font-size: 14px;
      color: #7b7c8f;
      cursor: pointer;
    }
    .current {
      color: #2467f2;
    }
  }
}

.introduce-page {
  // .page-one {
  //   height: 800px;
  // }
  // .page-two {
  //   height: 800px;
  // }
  div {
    height: 800px;
  }
}
.footer {
  width: 100%;
  height: 300px;
}
</style>
